<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*div {*/
        /*width: 100px;*/
        /*height: 100px;*/
        /*background-color: #44C6FA;*/
        /*cursor: pointer;*/
        /*}*/

        /*.aaa {*/
        /*background-color: red;*/
        /*}*/

        * {
            margin: 0px;
            padding: 0px;
        }

        .top-banner {
            height: 80px;
            background-color: pink;
        }

        .w {
            width: 1210px;
            margin: 10px auto;
            position: relative;
        }

        img {
            width: 1210px;
            height: 80px;
            background-color: #C81623;
        }

        a {
            color: black;
            text-decoration: none;
            width: 20px;
            height: 20px;
            top: 5px;
            right: 5px;
            font: 700 14px/20px "simsum";
            text-align: center;
            position: absolute;
        }

        .hide {
            display: none;
        }
    </style>
</head>
<body>
<!--<div id="box"></div>-->
<div class="top-banner" id="topbanner">
    <div class="w">
        <img src="" alt=""/>
        <a href="#" id="closebanner">x</a>
    </div>
</div>
</body>
</html>
<script>
    //    var div = document.getElementById("box");
    //        div.onclick =  clickAlert;
    //        function clickAlert() {
    //            alert("你点击了");
    //            div.style.backgroundColor = "red";
    //            div.className = "aaa";
    //        }

    //    div.onclick = function () {
    //        alert("你点击了");
    //    }
    var topbanner = document.getElementById("topbanner");
    var closebanner = document.getElementById("closebanner");
    closebanner.onclick = function () {
        topbanner.className = "hide";
        closebanner.className = "hide";
    }
</script>